<template>
  <div class="content">
    <Header :title="name" :show_search="false" :show_add="false" @backClick="backClick"></Header>
    <div class="chart_content">
      <scroller >
        <div v-for="item,index in this.chatsList" class="item">
          <div class="replay">
            <img :src="item.askImg">
            <span>{{item.replyContent}}</span>
          </div>
          <div class="ask">
            <div style="flex: 1;display: inline-block;"></div>
            <span>{{item.askContent}}</span>
            <img :src="item.replyImg">
          </div>
        </div>
      </scroller>
    </div>

    <div class="bottom" v-show="true">
      <div class="send">
        <input type="text"
               class="sText"
               placeholder="请输入聊天内容">
        <input type="button" class="btn" value="发送"/>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from './Header.vue'

  export default {
    components: {
      Header,
    },
    name: "ChartRoom",
    data() {
      return {
        name: '',
        chatsList: [
          {
            askImg: require('../assets/logo.png'),
            replyImg: require('../assets/logo.png'),
            askContent: '你好',
            replyContent: '你好时代峻峰我集散地附近四等奖覅圣诞节覅圣诞节覅圣诞节覅'
          },
          {
            askImg: require('../assets/logo.png'),
            replyImg: require('../assets/icon1.png'),
            askContent: '你是谁',
            replyContent: '你猜啊'
          },
          {
            askImg: require('../assets/logo.png'),
            replyImg: require('../assets/logo.png'),
            askContent: '你好',
            replyContent: '谢谢'
          },
          {
            askImg: require('../assets/logo.png'),
            replyImg: require('../assets/icon1.png'),
            askContent: '你是谁',
            replyContent: '你猜啊'
          },
          {
            askImg: require('../assets/logo.png'),
            replyImg: require('../assets/logo.png'),
            askContent: '你好',
            replyContent: '谢谢'
          },
          {
            askImg: require('../assets/logo.png'),
            replyImg: require('../assets/icon1.png'),
            askContent: '你是谁',
            replyContent: '你猜啊'
          },
          {
            askImg: require('../assets/logo.png'),
            replyImg: require('../assets/logo.png'),
            askContent: '你好',
            replyContent: '谢谢'
          },
          {
            askImg: require('../assets/logo.png'),
            replyImg: require('../assets/icon1.png'),
            askContent: '你是谁',
            replyContent: '你猜啊'
          },
        ]
      }
    },
    methods: {
      backClick() {
        this.$router.go(-1)
      }
    },
    created() {
      this.name = this.$route.params.name

    },
  }
</script>

<style scoped>

  .content{

  }

  .chart_content {
    background: lightgray;
    position: fixed;
    top: 46px;
    bottom: 50px;
    left: 0px;
    right: 0px;
  }


  .replay {
    padding: 10px;
    display: flex;
  }

  .replay img {
    width: 20px;
    height: 20px;
  }

  .replay span {
    margin-left: 10px;
    background: white;
    border-radius: 3px;
    padding: 4px;
    margin-right: 30px;
  }

  .ask {
    padding: 10px;
    display: flex;
  }

  .ask img {
    width: 20px;
    height: 20px;
  }

  .ask span {
    text-align: left;
    background: darkseagreen;
    display: block;
    border-radius: 4px;
    padding: 4px;
    margin-right: 10px;
    margin-left: 30px;
  }

  .bottom {
    position: fixed;
    height: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
  }

  .send {
    display: flex;

  }

  .sText {
    flex: 6;
    height: 30px;
    margin: 10px;
    border: 0;
    padding-left: 8px;
    border-bottom: 1px solid rgba(153, 153, 153, 0.8);
    /*border: 1px solid rgba(153,153,153,0.8);*/
    font-size: 15px;
  }

  .sText.active {
    background-color: red;
  }

  .btn {
    flex: 1;
    height: 30px;
    margin: 10px 10px;
    border: 0;
    border-radius: 3px;
    /*float: right;*/
    text-align: center;
    font-size: 16px;
    color: white;
    background-color: #09BB07;
  }
</style>
